<template>
    <div class="main">
        <ul class="ul-flex">
            <li class="header-img">
                <img :src="infoList.headImg" alt=""/>
            </li>
            <li class="two-line">
                <p>{{infoList.name}}</p>
                <p>{{infoList.updateTime}}</p>
            </li>
        </ul>
        <div class="content">
            <p>{{infoList.content}}</p>
        </div>
        <ul class="evaluate">
            <li class="size-left">{{infoList.size}}</li>
            <li class="praise"><img src="../../assets/imgs/praise.svg" alt=""/></li>
            <li class="right-eva" @click="$emit('evaEvent')"><img src="../../assets/imgs/evaluate.svg" alt=""/></li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
            infoList: {
                type: Object,
                default: {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        height: 100%;
        background: #fff;
        .ul-flex {
            display: flex;
            padding: 10px;
            .header-img {
                flex: 0 0 40px;
                & > img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .two-line {
                flex: 1;
                margin-left: 8px;
                & > p {
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    color: #666;
                }
            }
        }
        .content {
            padding: 0 12px;
            & > p {
                text-indent: 2em;
                font-size: 14px;
                color: #666;
                line-height: 22px;
            }
        }
        .evaluate {
            display: flex;
            height: 48px;
            line-height: 48px;
            padding: 0 8px;
            border-bottom: 1px solid #f1f1f1;
            .size-left {
                flex: 0 0 240px;
                font-size: 12px;
                color: #999;
            }
            .praise {
                flex: 1;
                text-align: center;
                & > img {
                    width: 24px;
                    height: 24px;
                }
            }
            .right-eva {
                flex: 1;
                text-align: center;
                & > img {
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }
</style>
